<template>
	<view>
		<page-head :returnButton="true" :goods="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<view>
			<view>
				<swiper class="goods-img" :current="current" :duration="duration">
					<swiper-item v-for="(item,index) in goodsInfo.images">
						<view>
							<image src="/static/images/no2_pic2.jpg" alt="商品名">
						</view>
					</swiper-item>				
				</swiper>
				<view class="slide-subscript mr">
					<text><text @change="changeIndicatorDots">{{current}}</text><text>/3</text></text>
				</view>
			</view>
			<view class="p-t-b4 p-l-r3 bg-white">
				<text class="fs-g display-inline width font-weight">{{goodsInfo.name}}</text>
				<text class="color-red">¥<text class="set-size">{{goodsInfo.price}}</text></text> 
			</view>
			<view class="bg-white m-t-2 p-l-r3 p-t-b4">
				<text class="fs-32 font-weight">{{sellerInfo.name}}</text>
				<view class="flex justify-between fs-24 m-t1">
					<view class="input-goods"><text class="iconfont icon-dingwei" style="font-size: 30rpx;"></text><text class="ml-1">{{sellerInfo.address}}</text></view>
					<text class="input-goods">{{sellerInfo.distance}}</text>
				</view>
			</view>
			<!-- 评价 -->
			<view class="m-t-2 bg-white p-l-r3 p-t-b4">
				<view class="flex align-center">
					<view class="flex fs-g justify-between align-center width">
						<text class="order-text active">评价</text>
						<text class="input-goods">（{{commentInfo.count}}）</text>
					</view>
				</view>
				<evaluate></evaluate>
				<view class="flex justify-content align-center m-b12">
					<navigator :url="'../all-evaluation/all-evaluation?id='+goodsId">
						<text class="fs-2">查看全部</text><text class="iconfont icon-youjiantou_huaban goods-icon ml-1"></text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="fixed fixed-bottom bg-white">
			<bright-button title="购买"></bright-button>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import brightButton from '@/components/common/bright-button.vue'
import evaluate from '@/components/common/evaluate.vue'
	export default {
		components:{
			pageHead,
			brightButton,
			evaluate
		},
		data() {
			return {
				current:1,
				duration: 500,
				goodsId:'',
				goodsInfo:{}, //商品信息
				sellerInfo:{}, //卖家信息
				commentInfo:{}, //评论
			}
		},
		onLoad(e) {
			this.goodsId = e.id;
			this.getDetail();
		},
		methods: {
			clickLeftReturn(){
				uni.redirectTo({
				    url: '../delicacy/delicacy'
				});
			},
			changeIndicatorDots(e){
				console.log(e);
			},
			//获取信息(商品、卖家、评论)
			getDetail(){
				this.$myRequest({
					method:'POST',
					url:'/api/goods/detail',
					data:{
						id:this.goodsId,
					},
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						var resultData = res.data.data;
						this.goodsInfo = resultData.goods;
						this.sellerInfo = resultData.seller;
						this.commentInfo = resultData.comment;
					}
				})
			}
			
		}
	}
</script>

<style scoped>
.goods-img{width: 100%;height: 500rpx;}
.goods-img image{width: 100%;height: 500rpx;}
.goods-icon{font-size: 40rpx;}
.slide-subscript{background-color: #000000;float: right;text-align: center; opacity: .4;width: 90rpx;height: 48rpx;margin-top: -100rpx; color: #FFF2DE;border-radius: 24rpx;}
</style>
